<template>
  <div class="chart">
    <Mainview :objArr="dataArr"></Mainview>
    <div class="top">
      <div id="chart"></div>
      <div id="chartRight"></div>
    </div>
    <div class="middle">
      <div id="chartSector"></div>
      <div id="chartRadar"></div>
    </div>
  </div>
</template>

<script>
import Mainview from "@/views/index/mainview"
export default {
  components: {
    Mainview
  },
  data() {
    return {
      dataArr: [
        {
          id: 0,
          name: "用户",
          num: 109287,
          time: 2,
          ref: "a",
          icon: "el-icon-s-custom"
        },
        {
          id: 1,
          name: "访问量",
          num: 22938912,
          time: 2,
          ref: "b",
          icon: "el-icon-s-marketing"
        },
        {
          id: 2,
          name: "品牌",
          num: 5678,
          time: 2,
          ref: "c",
          icon: "el-icon-s-management"
        },
        {
          id: 3,
          name: "商品总量",
          num: 109287,
          time: 2,
          ref: "d",
          icon: "el-icon-s-cooperation"
        },
      ]
    }
  },
  methods: {
    chart() {
      let mychart = this.$charts.init(document.getElementById("chart"));
      mychart.setOption({
        title: {
          text: "商品销量",
          textStyle: {
            fontSize: 25,
            lineHeight: 50
          },
          left: 60
        },
        legend: {
          right: 60,
          top: 15
        },
        tooltip: {},
        xAxis: {
          data: [
            "上衣",
            "榴莲",
            "裤子",
            "U盘",
            "卫衣",
            "电饭锅",
            "帆布鞋",
            "路由器",
            "羽绒服"
          ]
        },
        yAxis: {},
        series: [
          {
            name: "单价",
            type: "bar",
            data: [120, 99, 60, 40, 70, 80, 90, 200, 150],
            showBackground: true,
            backgroundStyle: {
              color: "rgba(107, 107, 107, 0.1)"
            }
          },
          {
            name: "销量",
            type: "bar",
            data: [30, 44, 100, 90, 150, 40, 30, 180, 70],
            showBackground: true,
            backgroundStyle: {
              color: "rgba(107, 107, 107, 0.1)"
            }
          }
        ]
      });
    },
    chartRight() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom = document.getElementById("chartRight");
      var myChart = this.$charts.init(chartDom);
      var option;

      this.$http
        .get(ROOT_PATH + "/data/asset/data/life-expectancy-table.json")
        .then(res => {
          run(res.data, this.$charts);
        });
      function run(_rawData, echarts) {
        const countries = [
          "Finland",
          "France",
          "Germany",
          "Iceland",
          "Norway"
        ];
        const datasetWithFilters = [];
        const seriesList = [];
        echarts.util.each(countries, function(country) {
          var datasetId = "dataset_" + country;
          datasetWithFilters.push({
            id: datasetId,
            fromDatasetId: "dataset_raw",
            transform: {
              type: "filter",
              config: {
                and: [
                  { dimension: "Year", gte: 1950 },
                  { dimension: "Country", "=": country }
                ]
              }
            }
          });
          seriesList.push({
            type: "line",
            datasetId: datasetId,
            showSymbol: false,
            name: country,
            endLabel: {
              show: true,
              formatter: function(params) {
                return params.value[3] + ": " + params.value[0];
              }
            },
            labelLayout: {
              moveOverlap: "shiftY"
            },
            emphasis: {
              focus: "series"
            },
            encode: {
              x: "Year",
              y: "Income",
              label: ["Country", "Income"],
              itemName: "Year",
              tooltip: ["Income"]
            }
          });
        });
        option = {
          animationDuration: 4000,
          dataset: [
            {
              id: "dataset_raw",
              source: _rawData
            },
            ...datasetWithFilters
          ],
          title: {
            text: "1950-2015的经济数据折线图",
            textStyle: {
              lineHeight: 50,
              fontSize: 24
            },
            left: 20
          },
          legend: {
            width: 50,
            right: 20,
            bottom: 60
          },
          tooltip: {
            order: "valueDesc",
            trigger: "axis"
          },
          xAxis: {
            type: "category",
            nameLocation: "middle"
          },
          yAxis: {},
          grid: {
            right: 140
          },
          series: seriesList
        };
        myChart.setOption(option);
      }
      option && myChart.setOption(option);
    },
    chartSector() {
      var chartDom = document.getElementById("chartSector");
      var myChart = this.$charts.init(chartDom);
      var option;

      option = {
        title: {
          text: "信息数据扇形图",
          textStyle: {
            fontSize: 24,
            lineHeight: 50
          },
          bottom: 0,
          left: 40
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "管理" },
              { value: 580, name: "电子邮件" },
              { value: 484, name: "工会广告" },
              { value: 300, name: "视频广告" }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    chartRadar() {
      var chartDom = document.getElementById("chartRadar");
      var myChart = this.$charts.init(chartDom);
      let option = {
        title: {
          text: "Proportion of Browsers",
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "scroll",
          bottom: 10,
          data: (function() {
            var list = [];
            for (var i = 1; i <= 28; i++) {
              list.push(i + 2000 + "");
            }
            return list;
          })()
        },
        visualMap: {
          top: "middle",
          right: 10,
          color: ["red", "yellow"],
          calculable: true
        },
        radar: {
          indicator: [
            { text: "IE8-", max: 400 },
            { text: "IE9+", max: 400 },
            { text: "Safari", max: 400 },
            { text: "Firefox", max: 400 },
            { text: "Chrome", max: 400 }
          ]
        },
        series: (function() {
          var series = [];
          for (var i = 1; i <= 28; i++) {
            series.push({
              type: "radar",
              symbol: "none",
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: "rgba(0,250,0,0.3)"
                }
              },
              data: [
                {
                  value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                  ],
                  name: i + 2000 + ""
                }
              ]
            });
          }
          return series;
        })()
      };
      option && myChart.setOption(option);
    },
    computerinfo() {
      var chartDom = document.getElementById("computerinfo");
      var myChart = this.$charts.init(chartDom);
      var option;

      // this.$http
      //   .get(ROOT_PATH + "/data/asset/data/life-expectancy-table.json")
      //   .then(res => {
      //     run(res.data, this.$charts);
      //   });
      // function run(_rawData, echarts) {
      //   const countries = [
      //     "Finland",
      //     "France",
      //     "Germany",
      //     "Iceland",
      //     "Norway"
      //   ];
      //   const datasetWithFilters = [];
      //   const seriesList = [];
      //   echarts.util.each(countries, function(country) {
      //     var datasetId = "dataset_" + country;
      //     datasetWithFilters.push({
      //       id: datasetId,
      //       fromDatasetId: "dataset_raw",
      //       transform: {
      //         type: "filter",
      //         config: {
      //           and: [
      //             { dimension: "Year", gte: 1950 },
      //             { dimension: "Country", "=": country }
      //           ]
      //         }
      //       }
      //     });
      //     seriesList.push({
      //       type: "line",
      //       datasetId: datasetId,
      //       showSymbol: false,
      //       name: country,
      //       endLabel: {
      //         show: true,
      //         formatter: function(params) {
      //           return params.value[3] + ": " + params.value[0];
      //         }
      //       },
      //       labelLayout: {
      //         moveOverlap: "shiftY"
      //       },
      //       emphasis: {
      //         focus: "series"
      //       },
      //       encode: {
      //         x: "Year",
      //         y: "Income",
      //         label: ["Country", "Income"],
      //         itemName: "Year",
      //         tooltip: ["Income"]
      //       }
      //     });
      //   });
      //   option = {
      //     animationDuration: 4000,
      //     dataset: [
      //       {
      //         id: "dataset_raw",
      //         source: _rawData
      //       },
      //       ...datasetWithFilters
      //     ],
      //     title: {
      //       text: "1950-2015的经济数据折线图",
      //       textStyle: {
      //         lineHeight: 50,
      //         fontSize: 24
      //       },
      //       left: 20
      //     },
      //     legend: {
      //       width: 50,
      //       right: 20,
      //       bottom: 60
      //     },
      //     tooltip: {
      //       order: "valueDesc",
      //       trigger: "axis"
      //     },
      //     xAxis: {
      //       type: "category",
      //       nameLocation: "middle"
      //     },
      //     yAxis: {},
      //     grid: {
      //       right: 140
      //     },
      //     series: seriesList
      //   };
      //   myChart.setOption(option);
      // }
      option && myChart.setOption(option);
    }
  },
  mounted() {
    this.chart();
    this.chartRight();
    this.chartSector();
    this.chartRadar();
  }
};
</script>

<style lang="sass">
.chart
  padding: 20px
  background: #ddd
  .top
    display: flex
    justify-content: space-between
    div
      border-radius: 10px
      background: #fff
#chart
	width: 550px
	height: 400px
#chartRight
  width: 700px
  height: 400px
#chartSector
  width: 550px
  height: 500px
#chartRadar
  width: 700px
  height: 500px
.middle
  display: flex
  justify-content: space-between
  margin: 20px 0
  div
    border-radius: 10px
    background: #fff

#computerinfo
  width: 700px
  height: 400px
  margin: 0 auto 20px
  background: #fff
  border-radius: 10px
</style>